<template>
  <el-dialog
    v-model="conf.visible"
    title="用户授权"
    width="60%"
    draggable
    :before-close="hide"
  >
    <el-form
      v-for="(form, i) in forms"
      :key="i"
      :model="form"
      :inline="true"
      size="small"
      :ref="'form' + i"
      :rules="rules"
    >
      <el-form-item
        prop="system"
        label="系统"
        label-width="100px"
        label-position="right"
      >
        <el-select
          v-model="form.sys_id"
          style="width: 100%"
          clearable
          placeholder="请选择系统"
          @remove-tag="clear(i)"
          @change="change"
        >
          <el-option
            v-for="item in systemList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
            :disabled="true"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        prop="role"
        label="角色"
        label-width="100px"
        label-position="right"
      >
        <el-select
          v-model="form.role_id"
          style="width: 100%"
          clearable
          placeholder="请选择角色"
        >
          <el-option
            v-for="item in roleList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      conf: {
        visible: false,
      },
      query: {},
      forms: [],
      rules: {
        system: [
          {
            required: true,
            message: "请选择系统",
            trigger: "blur",
          },
        ],
        role: [
          {
            required: true,
            message: "请选择角色",
            trigger: "blur",
          },
        ],
      },
      systemList: this.$theia.enum.get("system_info"),
      roleList: this.$theia.enum.get("role_info"),
    };
  },

  methods: {
    show(fm) {
      this.conf.visible = true;
      this.query = fm;
      this.querySystemRole();
    },
    querySystemRole() {
      let that = this;
      this.$theia.http
        .post("/userinfo/queryrolelist", this.query)
        .then((res) => {
          that.forms = res;
        })
        .catch((res) => {
          let code = (res.response || {}).status;
          let msg = `查询用户系统角色信息失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    },
    close() {
      this.conf.visible = false;
    },
    onSave(sysids, roleids) {
      let that = this;
      this.$theia.http
        .post("/userinfo/savesysrole", { sysids: sysids, roleids: roleids,user_id:this.query.user_id })
        .then((res) => {
          that.$notify.success({title: '成功',message: '用户系统角色信息保存成功',duration:5000})
         that.close()
        })
        .catch((res) => {
          let code = (res.response || {}).status;
          let msg = `保存用户系统角色信息失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    
    },
    change(v) {
      this.systemList.forEach((fm) => {
        if (fm.value == v) {
          fm.disabled = true;
        }
      });
    },
    clear(v) {
      this.systemList.forEach((fm) => {
        if (fm.value == v) {
          fm.disabled = false;
        }
      });
    },
    save() {
      let sysIds = [];
      let roleIds = [];
      this.forms.forEach((fm) => {
        if (fm.sys_id && fm.role_id) {
          sysIds.push(fm.sys_id);
          roleIds.push(fm.role_id);
        }
      });
      this.onSave(sysIds.join(","), roleIds.join(","));
    },
  },
};
</script>

<style>
</style>